<template>
	<!--地址picker-->
	<view :status="checkStatus" class="lotus-address">
		<view class="lotus-address-mask"></view>
		<view
			:class="lotusAddressData.visible?'lotus-address-box':'lotus-address-box lotus-address-box-out'">
			<view class="lotus-address-picker-box">
				<!--省-->
				<scroll-view scroll-y :scroll-into-view="'pid'+pChoseIndex"
					class="lotus-address-picker-box-item one">
					<view @tap="clickPicker(0,pIndex,pItem);" :id="'pid'+pIndex"
						:class="pIndex === pChoseIndex?'lotus-address-picker lotus-address-picker2':'lotus-address-picker'"
						v-for="(pItem,pIndex) in province" :key="pIndex">
						{{pItem.name}}
					</view>
				</scroll-view>
				<!--市-->
				<scroll-view scroll-y :scroll-into-view="'cid'+cChoseIndex"
					class="lotus-address-picker-box-item two">
					<!-- 打三角标表明该区域存在子小区 -->
					<view @tap="clickPicker(1,cIndex,cItem);" :id="'cid'+cIndex"
						class="lotus-address-picker"
						:class="{'lotus-address-picker2': cIndex === cChoseIndex, 'tip': (nowTipList || []).find(x => x.areaId === cItem.id) }"
						v-for="(cItem,cIndex) in city" :key="cIndex"
						style="position: relative">
						{{cItem.name}}
					</view>
				</scroll-view>
				<!--区-->
				<scroll-view scroll-y :scroll-into-view="'tid'+tChoseIndex"
					class="lotus-address-picker-box-item three">
					<view @tap="clickPicker(2,tIndex,tItem);" :id="'tid'+tIndex"
						:class="tIndex === tChoseIndex?'lotus-address-picker lotus-address-picker2':'lotus-address-picker'"
						v-for="(tItem,tIndex) in town" :key="tIndex">{{tItem.townName}}
					</view>
				</scroll-view>
				<!--区END-->
			</view>
		</view>
	</view>
	<!--地址picker END-->
</template>
<script>
	import {
		getSpecTree,
		getTownList,
		getSignByAreas
	} from '@/api/survey';
	import {
		lotusAddressJson
	} from "./Winglau14-lotusAddress.js";
	import {
		customBaseFlatten
	} from "@/utils/fun";
	export default {
		props: ['lotusAddressData'],
		data() {
			return {
				visible: false,
				province: [],
				city: [],
				town: [],
				provinceName: '',
				cityName: '',
				townName: '',
				type: 0, //0新增1编辑
				pChoseIndex: -1,
				cChoseIndex: -1,
				tChoseIndex: -1,
				timeObj: null,
				lotusAddressList: lotusAddressJson, // []
				nowTipList: []
			};
		},
		onReady() {
			getSpecTree().then((res) => {
				let city3=[];
				console.log(res,'900000000');
				// 先只取到金华市层级的
				const city = res.data.result[0].children[0].children[0].children;
				const city2 = res.data.result[0].children[2].children[7].children;
				console.log(city,'100000000');
				console.log(city2,'100000000');
				city3 = [...city,...city2];
				// console.log(cit3,'800000000');
				const tree = customBaseFlatten(city3).map(x => {
					return this.reBuild(x)
				})
				console.log(tree,'000000000');
				this.lotusAddressList = tree
				this.$emit('initLotusAddressTree',city3.children);
			})
		},
		methods: {
			reBuild(data) {
				return {
					...data,
					value: data.id,
					name: data.departName || data.title,
					parent: data.parentId
				}
			},
			//取消
			cancelPicker() {
				const provinceCode = this.getTarId(this.provinceName);
				const cityCode = this.getTarId(this.cityName);
				const townCode = this.getTarId(this.townName);
				this.visible = false;
				this.$emit("choseVal", {
					province: this.provinceName,
					provinceCode,
					city: this.cityName,
					cityCode,
					town: this.townName,
					townCode,
					isChose: 0,
					visible: false
				});
			},
			//获取最后选择的省市区的值
			chosedVal() {
				this.type = 1;
				const provinceCode = this.getTarId(this.provinceName);
				const cityCode = this.getTarId(this.cityName, provinceCode);
				const townCode = this.getTarId(this.townName, cityCode);
				let isChose = 0;
				//已选省市区 isChose = 1
				if ((this.provinceName && this.cityName) || (this.provinceName && this
						.cityName && this.townName)) {
					isChose = 1;
				}
				this.visible = false;
				this.$emit("choseVal", {
					province: this.provinceName,
					provinceCode,
					city: this.cityName,
					cityCode,
					town: this.townName,
					townCode,
					isChose,
					visible: false
				});
			},
			//获取省市区value
			getTarId(name, parent) {
				let id = 0;
				this.lotusAddressList.forEach((item, index) => {
					// 选择市区 需要传父级的id 精准匹配 以免重复导致code不一致
					if (item.name === name && parent && item.parent === parent) {
						id = item.value;
					} else {
						// 选择省 parent为空
						if (item.name === name && !parent) {
							id = item.value;
						}
					}
				});
				return id;
			},
			//获取市数据
			getCityArr(parentId) {
				let city = [];
				this.lotusAddressList.forEach((item, index) => {
					if (item.parent === parentId) {
						city.push(item);
					}
				});
				return city;
			},
			//初始化数据
			initFn() {
				if (!this.province.length) {
					this.lotusAddressList.forEach((item, index) => {
						if (!item.parent) {
							this.province.push(item);
						}
					});
				}
				//已选择省市区，高亮显示对应选择省市区
				const p = this.lotusAddressData.provinceName;
				const c = this.lotusAddressData.cityName;
				const t = this.lotusAddressData.townName;
				//已选省
				if (p) {
					this.pChoseIndex = this.getTarIndex(this.province, p);
				}
				//已选市
				if (p && c) {
					const pid = this.getTarId(p);
					this.city = this.getCityArr(pid);
					this.cChoseIndex = this.getTarIndex(this.city, c);
				}
				//已选区
				if (p && c && t) {
					this.pChoseIndex = this.getTarIndex(this.province, p);
					const pid = this.getTarId(p);
					this.city = this.getCityArr(pid);
					this.cChoseIndex = this.getTarIndex(this.city, c);
					const cid = this.getTarId(c);
					this.tChoseIndex = this.getTarIndex(this.town, t);
				}
				//未选省市区
				if (!p && !c && !t) {
					this.pChoseIndex = -1;
					this.cChoseIndex = -1;
					this.tChoseIndex = -1;
					this.city = [];
					this.town = [];
				}
			},
			//获取已选省市区
			getChosedData() {
				const pid = this.getTarId(this.provinceName);
				this.city = this.getCityArr(pid);
				const cid = this.getTarId(this.cityName, pid);
				//已选省市区获取对应index
				if (this.provinceName) {
					this.pChoseIndex = this.getTarIndex(this.province, this.provinceName);
				}
				if (this.cityName) {
					this.cChoseIndex = this.getTarIndex(this.city, this.cityName);
				}
				if (this.townName) {
					// console.log(this.town, this.townName)
					this.tChoseIndex = this.getTarIndex(this.town, this.townName);
				}
			},
			//选择省市区交互
			clickPicker(type, index, item) {
				//省
				if (type === 0) {
					this.pChoseIndex = index;
					this.provinceName = item.name;
					this.cChoseIndex = -1;
					this.tChoseIndex = -1;
					this.cityName = '';
					this.townName = '';
					this.$emit('areaChoice', this.provinceName)
					this.getTip();
				}
				//市
				if (type === 1) {
					this.cChoseIndex = index;
					this.cityName = item.name;
					this.tChoseIndex = -1;
					this.townName = '';
					const provinceCode = this.getTarId(this.provinceName);
					const cityCode = this.getTarId(this.cityName, provinceCode);
					const params = {
						areaId: cityCode,
            pageSize: 999,
					}
					getTownList(params).then((res) => {
						let town = []
						this.town = res.data.result.records.map(item=>({...item,name:item.townName}))
					}).catch(e => {})
				}
				//区
				if (type === 2) {
					const provinceCode = this.getTarId(this.provinceName);
					const cityCode = this.getTarId(this.cityName, provinceCode);
					const townCode = item.id
					this.tChoseIndex = index;
					this.townName = item.townName;
					this.$emit('choice', [{
						id: provinceCode,
						name: this.provinceName
					}, {
						id: cityCode,
						name: this.cityName
					}, {
						id: townCode,
						name: this.townName
					}])
				}
				//获取省市区数据
				this.getChosedData();
			},
			//获取已选省市区index
			getTarIndex(arr, tarName) {
				let cIndex = 0;
				arr.forEach((item, index) => {
					if (item.name === tarName) {
						cIndex = index;
					}
				});
				return cIndex;
			},
			// 打三角标
			getTip() {
				// 三角标功能
				const list = []
				const provinceCode = this.getTarId(this.provinceName);
				this.lotusAddressList.forEach((item, index) => {
					if (item.parent === provinceCode) {
						list.push(item.value);
					}
				});
				if (Array.isArray(list) && list.length > 0) {
					const params = {
						list: list.join(',')
					}
					getSignByAreas(params).then((res) => {
						this.nowTipList = res.data.result || []
					})
				}
			}
		},
		computed: {
			checkStatus() {
				let t = null;
				const _this = this;
				if (!_this.visible) {
					_this.visible = _this.lotusAddressData.visible;
					//获取省市区
					_this.provinceName = _this.lotusAddressData.provinceName;
					_this.cityName = _this.lotusAddressData.cityName;
					_this.townName = _this.lotusAddressData.townName;
					//生成初始化数据
					_this.initFn();
					t = _this.visible;
				}
				return t;
			}
		}
	}
</script>
<style scoped>
	@import "./Winglau14-lotusAddress.css";

	.triangle-topleft {
		width: 0;
		height: 0;
		border-top: 100px solid red;
		border-right: 100px solid transparent;
	}

	.tip::before {
		position: absolute;
		transform: rotate(90deg);
		bottom: 12rpx;
		right: 0;
		content: '';
		border-bottom: 8rpx solid #000000AA;
		border-left: 8rpx solid transparent;
		border-right: 8rpx solid transparent;
	}
</style>